<template>
    <div class="container">
        <div class="table-breadcrumb">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>店铺资料管理</el-breadcrumb-item>
                <el-breadcrumb-item>DIY模版</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div style="margin: 10px 0;padding: 20px;background-color: #fff;">
            <div style="display: flex;align-items: center;margin-bottom: 20px;">
                <!-- <el-button type="primary" @click="ClickModalAdd" style="margin-right: 10px;">添加快捷回复</el-button> -->
                <el-popconfirm title="此操作将永久删除该文件, 是否继续?" @confirm="DeleteList" style="height: inherit;">
                    <el-button type="danger" :disabled="selectedRowKeys.length > 0?false:true" slot="reference">删除</el-button>
                </el-popconfirm>
            </div>
            <div style="margin-top: 20px;">
                <Table :columns="listfields" :data-source="listData" :bordered="true" :pagination="false" :loading="loading" :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }">
                    <div slot="action" slot-scope="row, index">
                        <div style="display: flex;align-items: center;justify-content: space-around;">
                            <el-button :type="index.status == 1?'success':'info'" size="mini" @click="UseTemplate(index)">{{index.status == 1?'取消':'使用'}}</el-button>
                            <el-button type="primary" size="mini" @click="LooKItem(index)" style="margin-right: 10px;">查看</el-button>
                            <el-popconfirm title="此操作将永久删除该文件, 是否继续?" @confirm="DeleteItem(index)">
                                <el-button type="danger" size="mini" slot="reference">删除</el-button>
                            </el-popconfirm>
                        </div>
                    </div>
                    <div slot="status" slot-scope="row, index">
                        <el-tag type="success" v-if="row == 1">正在使用</el-tag>
                        <el-tag type="info" v-else>未使用</el-tag>
                    </div>
                </Table>
                <pagination :total="total" v-model="page" :pageSize.sync="pagesize" :showQuickJumper="true" @change="handlePageChange" @onShowSizeChange="onShowSizeChange"></pagination>
            </div>
            <modal title="查看模板" v-model="MadalLook" :centered="true" :maskClosable="false" :footer="null">
                <div style="display: flex;justify-content: center;">
                    <section class="decoration-edit">
                        <section class="c">
                            <div v-if="view && view.length >0" class="view-content" :style="{ background: view[0].BgColor,'padding-top': view[0].isFlex == null ||view[0].isFlex == null ||view[0].isFlex == false? '74px':'0' }">
                                <template v-for="(item, index) in view">
                                    <div :data-index="index" :key="index" class="item">
                                        <template>
                                            <component :is="typeList[item.type]['com']" :data="item" :className="className[item.tabType]"></component>
                                        </template>
                                    </div>
                                </template>
                            </div>
                        </section>
                    </section>
                </div>
            </modal>
        </div>
    </div>
</template>
<script>
    import { mapGetters, mapState, mapActions } from 'vuex';
    import Draggable from 'vuedraggable'
    import pagination from '@/common/pagination.vue'
    import Table from 'ant-design-vue/lib/table';
    import modal from 'ant-design-vue/lib/modal';
    import 'ant-design-vue/lib/table/style/css'; // 或者 ant-design-vue/lib/button/style/css 加载 css 文件
    import 'ant-design-vue/lib/modal/style/css'; // 或者 ant-design-vue/lib/button/style/css 加载 css 文件
    import EditForm from '@Decoration/Edit/index'

    import info from '@Decoration/View/info'
    import Product from '@Decoration/View/Product'
    import Images from '@Decoration/View/Images'
    import Banner from '@Decoration/View/Banner'
    import Search from '@Decoration/View/Search'
    import Notice from '@Decoration/View/Notice'
    import Shop from '@Decoration/View/Shop'

    // import { SearchConfig, BannerConfig, ImagesConfig, ProductConfig } from '@Decoration/defaultConfig.js'
    export default {
        name: 'Decoration',
        components: {
            pagination,
            Table,
            modal,
            EditForm,
            Draggable,
            info,
            Product,
            Images,
            Banner,
            Search,
            Notice,
            Shop,
        },
        data() {
            return {
                typeList: {
                    info: {
                        name: 'nav',
                        icon: 'https://manager.ryz1620.com/static/DIY/Banner.png',
                        com: info
                    },
                    banner: {
                        name: '轮播图',
                        icon: 'https://manager.ryz1620.com/static/DIY/Banner.png',
                        com: Banner
                    },
                    images: {
                        name: '图片',
                        icon: 'https://manager.ryz1620.com/static/DIY/Images.png',
                        com: Images
                    },
                    product: {
                        name: '商品',
                        icon: 'https://manager.ryz1620.com/static/DIY/Goods.png',
                        com: Product
                    },
                    Search: {
                        name: '搜索框',
                        icon: 'https://manager.ryz1620.com/static/DIY/Search.png',
                        com: Search
                    },
                    Shop: {
                        name: '店铺信息',
                        icon: 'https://manager.ryz1620.com/static/DIY/Shop.png',
                        com: Shop
                    },
                    Notice: {
                        name: '公告',
                        icon: 'https://manager.ryz1620.com/static/DIY/notice.png',
                        com: Notice
                    },
                },
                view: [],
                className: {
                    1: 'one',
                    2: 'two',
                    3: 'three'
                },
                selectedRowKeys: [],
                keyword: '',
                total: 0, //定义初始有多少条数据
                page: 1, //默认第几页
                pagesize: 10, //一页显示多少条数据
                MadalLook: false,
                listData: [],
                listfields: [{
                        title: '序号',
                        dataIndex: 'id',
                        align: 'center',
                        width: 150
                    },
                    {
                        title: '模板名称',
                        dataIndex: 'title',
                        align: 'center',
                    },
                    {
                        title: '备注',
                        dataIndex: 'remark',
                        align: 'center',
                    },
                    {
                        title: '状态',
                        dataIndex: 'status',
                        align: 'center',
                        scopedSlots: { customRender: 'status' },
                    },
                    {
                        title: '添加日期',
                        dataIndex: 'create_time',
                        align: 'center',
                    },
                    {
                        title: '操作',
                        dataIndex: 'action',
                        scopedSlots: { customRender: 'action' },
                        align: 'center',
                        width: 200,
                    }
                ],
            }
        },
        created() {
            // var arr = localStorage.getItem("StopFrom")
            // const newAra = arr ? JSON.parse(arr) : [];
            // console.log(newAra);
            // this.view = newAra
        },
        mounted() {
            var that = this
            that.getList()
        },
        methods: {
            DeleteItem(row) {
                var that = this
                // console.log(123);
                that.Delete(row.id)
            },
            DeleteList() {
                var that = this
                var id = that.selectedRowKeys
                var newID = id.join()
                that.Delete(newID)
            },
            Delete(row) {
                var that = this
                var params = {
                    id: row,
                }
                that.$http.post('api/admin/base/PageDiyTemplate/del', params).then(res => {
                    if (res.code === 1) {
                        // console.log(res);
                        that.selectedRowKeys = []
                        this.$message.success('删除成功！')
                        that.getList()
                    } else {
                        that.$message.error(res.msg)
                    }
                }).catch(err => {
                    that.$message.error(err.msg ? err.msg : err.toString())
                })
            },
            UseTemplate(row) {
                var that = this
                var params = {
                    id: row.id,
                    partner_id: localStorage.getItem("sid"),
                    partner_type: 'shop',
                    status: row.status == 0 ? 1 : 0,
                }
                if (row.status == 0) {
                    that.$http.post('api/admin/base/PageDiyTemplate/changeStatus', params).then(res => {
                        if (res.code === 1) {
                            this.visible = false
                            this.$message.success('使用成功！')
                            this.getList()
                        } else {
                            that.$message.error(res.msg)
                        }
                    }).catch(err => {
                        that.$message.error(err.msg ? err.msg : err.toString())
                    })
                    return
                }
                if (row.status == 1) {
                    this.$confirm('此操作将取消使用该模版,使用默认展示, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        that.$http.post('api/admin/base/PageDiyTemplate/changeStatus', params).then(res => {
                            if (res.code === 1) {
                                this.visible = false
                                this.$message.success('取消使用成功')
                                this.getList()
                            } else {
                                that.$message.error(res.msg)
                            }
                        }).catch(err => {
                            that.$message.error(err.msg ? err.msg : err.toString())
                        })
                    }).catch(() => {

                    });
                }
            },
            getList() {
                var that = this
                var params = {
                    title: that.keyword,
                    partner_id: localStorage.getItem("sid"),
                    partner_type: 'shop',
                    page: that.page,
                    pagesize: that.pagesize,
                }
                // console.log(params);
                that.$http.post('api/admin/base/PageDiyTemplate/index', params).then(res => {
                    if (res.code === 1) {
                        var data = res.data
                        var List = data.list
                        // console.log(data);
                        if (List.length > 0) {
                            List.forEach((item, index) => {
                                item.key = item.id
                                item.create_time = that.$moment(item.create_time * 1000).format('yyyy-MM-DD HH:mm')
                            })
                        }
                        that.total = data.count
                        that.listData = List
                    } else {
                        that.$message.error(res.msg)
                    }
                }).catch(err => {
                    that.$message.error(err.msg ? err.msg : err.toString())
                })
            },
            LooKItem(row) {
                // console.log(row);
                const newAra = row.content ? JSON.parse(row.content) : [];
                console.log(newAra);
                this.view = newAra
                this.MadalLook = true
            },
            handlePageChange(pageno, pagesize) { //点击第几页触发的函数
                this.page = pageno;
                this.pagesize = pagesize;
                this.getList()
            },
            onShowSizeChange(current, size) { //改变每页显示条目数的函数
                //pagesize 变化的回调
                this.page = current;
                this.pagesize = size;
                this.getList()
            },
            onSelectChange(selectedRowKeys) {
                // console.log('selectedRowKeys changed: ', selectedRowKeys);
                this.selectedRowKeys = selectedRowKeys;
            },
        }
    };
</script>
<style lang="less" scoped>
    .decoration-edit {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        /* padding: 10px 10px; */
        /* background: #f7f8f9; */
        /* height: calc(100vh - 180px); */
        position: relative;

        .l,
        .r {
            width: 340px;
            height: 100%;
            padding: 15px 0;
            background: #fff;
            box-shadow: 0 2px 6px #ccc;
        }

        .l {
            ul {
                margin: 0;
                padding: 0;
                display: flex;
                align-items: center;
                justify-content: space-between;

                li {
                    width: 80px;
                    height: 80px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    flex-direction: column;
                    cursor: default;
                    list-style: none;
                    font-size: 14px;
                    color: #666;
                    float: left;
                    margin: 0 10px;
                    border-radius: 6px;
                    transition: all .3s;
                    cursor: pointer;

                    /* &:hover {
                        background: #efefef;
                    } */

                    span {
                        display: block;
                        font-size: 40px;
                        margin-bottom: 8px;
                        color: #999;
                    }

                    p {
                        display: block;
                        margin: 0;
                        font-size: 12px;
                    }
                }
            }
        }

        .c {
            width: auto;
            max-width: 400px;
            position: relative;



            .view-content {
                width: 400px;
                height: 740px;
                background: #f5f5f5;
                overflow-y: auto;
                overflow-x: hidden;
                padding-top: 74px;
                box-shadow: 0 2px 6px #ccc;

                &::-webkit-scrollbar {
                    width: 6px;
                }

                &::-webkit-scrollbar-thumb {
                    background: #dbdbdb;
                }

                &::-webkit-scrollbar-track {
                    background: #f6f6f6;
                }

                .item {
                    transition: all .3s;
                    background: #fff;

                    /* &:hover {
                        transform: scale(0.95);
                        border-radius: 10px;
                        box-shadow: 0 0 10px #afafaf;

                        .el-icon-error {
                            display: block;
                        }
                    } */

                    div {
                        pointer-events: none;
                    }

                    .wait {
                        background: #deedff;
                        height: 35px;
                        text-align: center;
                        line-height: 35px;
                        font-size: 12px;
                        color: #666;
                    }

                    .el-icon-error {
                        position: absolute;
                        right: -10px;
                        top: -6px;
                        color: red;
                        font-size: 25px;
                        cursor: pointer;
                        display: none;
                        z-index: 9999;
                    }
                }
            }
        }

        .submit-btn {
            position: absolute;
            top: 20px;
            right: 26%;
            transform: translateX(-50%);
        }
    }
</style>